<!--
 * @Descripttion: 
 * @version: v1.0.0.0
 * @Author: 任飞
 * @Date: 2020-02-28 10:22:04
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-22 16:07:58
 -->
<template>
  <div>
    <textarea id="editor" :class="editorClassName" :style="styleStr"/>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  props: {
    simditor: {
      type: String,
      default: ""
    },
    editorClassName: {
      type: String,
      default: ""
    },
    styleStr: {
      type: String,
      default: "width: 85%;"
    }
  },
  data() {
    return {
      editor: null
    }
  },
  watch: {
    simditor: function(n, o) {
      this.editor.setValue(n)
    }
  },
  mounted() {
    this.initEditor()
  },
  methods: {
    initEditor() {
      this.editor = new Simditor({
        textarea: $('#editor'),
        pasteImage: true,
        tabIndent: false,
        // toolbarFloat: false,
        // markdown: true,
        toolbar: [
          'title',
          'bold',
          'italic',
          'underline',
          'strikethrough',
          'fontScale',
          'color',
          'ol',
          'ul',
          'blockquote',
          'code',
          'table',
          'link',
          'image',
          'hr',
          'indent',
          'outdent',
          'alignment',
          'markdown'
        ],
        upload: {
          url: process.env.BASE_API + '/admin/v1/upload/image',
          params: { 'Admin-Token': getToken() },
          fileKey: 'file',
          connectionCount: 3,
          leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
        }
      })
      this.editor.on("valuechanged", (e, src) => {
        const val = this.editor.getValue()
        this.$emit("update-simditor", val)
      })
      // this.editor.on("selectionchanged", (e, src) => {
      //   console.log('selectionchanged', e, src)
      // })
      this.editor.on("decorate", (e, src) => {
        //在makdown编辑方式下，每次输入会触发这个方法
        const val = this.editor.getValue()
        this.$emit("update-simditor", val)
      })
      // this.editor.on("undecorate", (e, src) => {
      //   console.log('undecorate', e, src)
      // })
      // this.editor.on("pasting", (e, src) => {
      //   console.log('pasting', e, src)
      // })
      // this.editor.on("focus", (e, src) => {
      //   console.log('focus', e, src)
      // })
      // this.editor.on("blur", (e, src) => {
      //   console.log('blur', e, src)
      // })
      // this.editor.on("destroy", (e, src) => {
      //   console.log('destroy', e, src)
      // })
    }
  }
}
</script>

<style lang="less">
.cus-mark {
  float: left;
  width: 50%;
  overflow: scroll;
}
.simditor-body {
  overflow: scroll;
}
.markdown-editor {
  float: left;
  width: 50%;
}
</style>